<!--/** 星空效果 */-->
<script lang="ts" setup>

</script>

<template>
  <div class="starrySky">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="title">Sass 星空</div>
  </div>
</template>

<style lang="scss" scoped>
.starrySky {
  // border: 1px solid orange;

  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

.title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  //color: #fff;
  text-align: center;
  font-family: '楷体', sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px; // 设置文本字符的间距
  margin-top: -60px;
  padding-left: 10px;
  background: linear-gradient(#fff, #38495a);
  background-clip: text; // 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
  -webkit-background-clip: text;
  color: transparent;
}

/*
  使用阴影生成星星
  参数:
    n:星星数量
*/
@function getShadows($n) {
  $shadow: '#{random(100)}vw #{random(100)}vh #fff';

  @for $i from 2 through $n {
    $shadow: '#{$shadow},#{random(100)}vw #{random(100)}vh #fff';
  }

  @return unquote($shadow); // 去除引号
}

$duration: 400s;
$count: 1000;
@for $i from 1 through 3 {

  $duration: floor($duration / 2);
  $count: floor($count / 2);

  .layer#{$i} {
    $size: #{$i}px;

    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    background-color: orange;
    left: 0;
    right: 0;
    //box-shadow: 10vw 10vh #fff, 20vw 20vh #fff;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;

    &::after {
      content: '';
      position: fixed;
      width: $size;
      height: $size;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes moveUp {
  100% {
    transform: translateY(-100vh);
  }
}
</style>